/**
 * Created by oiuyt on 2018/7/18.
 */
import React, { Component } from 'react';
import {
    Route,
    Switch,
    Link
} from 'react-router-dom'
//异步导入工具组件
import asyncComponent from '../../utils/asyncComponent'

import Showdata from './viewData.jsx'

const Test5 = asyncComponent(() => import("./test5"))
const Test6 = asyncComponent(() => import("./test6"))
const Test7 = asyncComponent(() => import("./test7"))
const Test8= asyncComponent(() => import("./test8"))
class Test4 extends Component {
/*
    调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this
    super(props)的目的：在constructor中可以使用this.props
    */
    constructor(props) {
        super(props);
        console.log(this.props)
        console.log(props)
        console.log("组件初始化4")
    }
    //route的path支持两种方式 1对象 2字符串
    render() {
        return (
            <div>
                <div>我是显示redux中的值的<Showdata/></div>
                <h3>获取Url{`${this.props.match.url}`} </h3>
                <Link to={{ pathname: '/test4/test5' }}>进入二级路由-1</Link>
                <br/>
                <Link to={{ pathname: '/test4/test6' }}>进入二级路由-2</Link>
                <br/>

                <Link to={{ pathname: '/test4/test7' }}>axios请求实例</Link>
                <br/>
                <Link to={{ pathname: '/test4/test8' }}>redux使用实例</Link>
                <Switch>
                <Route path={`${this.props.match.url}/test5`}  exact component={Test5}/>
                <Route path="/test4/test6" component={Test6}/>
                    <Route path="/test4/test7" component={Test7}/>
                    <Route path="/test4/test8" component={Test8}/>
                </Switch>
            </div>
        )
    }
}


export default Test4
